<template>
	<view class="contract-info-box" :style="'padding-top:'+(barHeight)+'px'">
		<view class="boxs">
			<NavBar left-icon="undo-filled" @onLeftIcon="back">
				<template v-slot:center>
					<view class="nav_center">
						<view class="navActive">合同详情</view>
					</view>
				</template>
			</NavBar>
			<view class="scroll-box">
				<scroll-view class="control" :scroll-x="true" :show-scrollbar="false">
					<view class="control_scroll">
						<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
							styleType="text" activeColor="#007aff"></uni-segmented-control>
					</view>
				</scroll-view>
			</view>
			<view class="content">
				<view v-if="current == 0">
					<ExpenseBaseInfo :id="id"></ExpenseBaseInfo>
				</view>
				<view v-if="current == 1">
					<OutworkUserList :expenseId="id" :type="1"></OutworkUserList>
				</view>
				<view v-if="current == 2">
					<AnnexList :business="3" :relationId="id"></AnnexList>
				</view>
				<view v-if="current == 3">
					<ApproveList :relationId="id" :flag="2"></ApproveList>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import ExpenseBaseInfo from './ExpenseBaseInfo.vue'
	import OutworkUserList from './OutworkUserList.vue'
	import AnnexList from '@/components/AnnexList.vue'
	import ApproveList from '@/components/ApproveList.vue'
	export default {
		components: {
			NavBar,
			ExpenseBaseInfo,
			OutworkUserList,
			AnnexList,
			ApproveList
		},
		data() {
			return {
				items: ['基本信息', '出差人员', '附件清单', '审批记录'],
				current: 0,
				id: '', // 合同Id
				type: 0, // 1销售合同，2采购合同
				barHeight: 0,
			}
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type
			if (this.type == 1) {
				this.items = ['基本信息', '附件清单', '审批记录']
			}
		},
		created() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight + 45;
		},
		methods: {
			back() {
				uni.switchTab({
					url: '/pages/finance/FinanceNav'
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		}
	}
</script>

<style>
	@import '../../static/css/commons.css';
	@import '../../static/css/ExpenseInfo.css';
</style>